<template>
    <div class="container">
        <!-- 默认插槽
            父组件使用子组件时，把html结构插入到子组件
            子组件中，通过slot定义插槽，接收父组件的html结构
                注意：如果没有传html结构，则显示slot的默认内容
        -->
       <Category>
        <ul>
            <li v-for="(food,index) in foods" :key="index">{{ food }}</li>
        </ul>
       </Category>
       <Category>
        <h2>我传给第二个category</h2>
       </Category>
       <Category/> 

    </div>
</template>

<script>
// 引入组件
import Category from './components/Category.vue';
export default {
    name:'App',
    components:{
        Category
    },
    data(){
        return{
            foods:['小龙虾','螃蟹','青蛙','牛排']
        }
    }
    
}
</script>

<style scoped>
.container{
    display: flex;
    justify-content: space-around;
}
</style>